<template>
  <img alt="" class="bg" src="@/assets/1.jpg">
  <div v-if="isLogin" class="content p-shadow">
    <div class="title">欢迎使用水产品管理系统</div>
    <div class="row">
      <div class="p-inputgroup">
        <span class="p-inputgroup-addon">
          <i class="pi pi-user"></i>
        </span>
        <span class="p-float-label">
          <InputText id="account" v-model="user.username"/>
          <label for="account">账号</label>
        </span>
      </div>
    </div>
    <div class="row">
      <div class="p-inputgroup">
        <span class="p-inputgroup-addon">
          <i class="pi pi-lock"></i>
        </span>
        <span class="p-float-label">
          <Password id="pass" v-model="user.password" toggleMask></Password>
          <label for="pass">密码</label>
        </span>

      </div>
    </div>
    <div class="row">
      <Button class="p-button-info p-button-outlined" icon="pi pi-chevron-circle-right" iconPos="right" label="登录"
              @click="toLogin"/>
      <Button class="p-button-danger p-button-outlined p-ml-6" icon="pi pi-user-plus" iconPos="right"
              label="注册" @click="cancelLogin"/>
    </div>
  </div>

  <div v-else class="content">
    <div class="title">用户注册</div>
    <div class="row">
      <div class="p-inputgroup">
        <span class="p-inputgroup-addon">
          <i class="pi pi-user"></i>
        </span>
        <span class="p-float-label">
          <InputText id="account" v-model="user.username"/>
          <label for="account">账号</label>
        </span>
      </div>
    </div>
    <div class="row">
      <div class="p-inputgroup">
        <span class="p-inputgroup-addon">
          <i class="pi pi-user"></i>
        </span>
        <span class="p-float-label">
          <InputText id="nickname" v-model="user.nickname"/>
          <label for="nickname">昵称</label>
        </span>
      </div>
    </div>
    <div class="row">
      <div class="p-inputgroup">
        <span class="p-inputgroup-addon">
          <i class="pi pi-lock"></i>
        </span>
        <span class="p-float-label">
          <Password id="password" v-model="user.password" toggleMask>
            <template #footer>
              <Divider/>
              <p class="p-mt-2">建议</p>
              <ul class="p-pl-2 p-ml-2 p-mt-0" style="line-height: 1.5">
                <li>最少一个大写字母</li>
                <li>最少一个小写字母</li>
                <li>最少一个数字</li>
                <li>最少8位</li>
              </ul>
            </template>
          </Password>
          <label for="password">密码</label>
        </span>
      </div>
    </div>
    <div class="row">
      <div class="p-inputgroup">
        <span class="p-inputgroup-addon">
          <i class="pi pi-mobile"></i>
        </span>
        <span class="p-float-label">
          <InputMask id="phone" v-model="user.phone" mask="999-9999-9999"/>
          <label for="phone">电话</label>
        </span>
      </div>
    </div>
    <div class="row">
      <div class="p-inputgroup">
        <span class="p-inputgroup-addon">
          <i class="pi pi-globe"></i>
        </span>
        <span class="p-float-label">
          <InputText id="email" v-model="user.email"/>
          <label for="email">邮箱</label>
        </span>
      </div>
    </div>
    <div class="row">
      <Button v-if="!user.pic" class="p-button-info p-button-text" label="选择图像" @click="upload"/>
      <img v-else :src="user.pic" class="avatar"/>
    </div>
    <div class="row">
      <Button class="p-button-success p-button-outlined" label="提交"
              @click="toReg"/>
      <Button class="p-button-help p-button-outlined p-ml-6"
              label="取消" @click="cancelReg"/>
    </div>
  </div>

</template>
<script setup>
import R from '@/router'
import S from '@/store'
import {ref,onMounted} from 'vue'
import {setImg} from '@/util.js'
import service from '@/request.js'
import {useToast} from 'primevue/usetoast'

const Toast = useToast()
const upload = () => setImg((url) => user.value.pic = url)

let isLogin = ref(true), user = ref({})

function toReg() {
  service.post('user', user.value).then(r => {
    Toast.add({severity: 'success', summary: '注册成功', life: 3000})
    cancelReg()
  }).catch(e => Toast.add({severity: 'error', summary: e, life: 3000}))
}

function cancelReg() {
  isLogin.value = true
  user.value = {}
}

function cancelLogin() {
  isLogin.value = false
  user.value = {}
}

function toLogin() {
  service.post('user/login', user.value).then(r => {
    service.get(`user/id/${r.userId}`).then(s => S.commit('setUser', s))
    S.commit('setAuth', r)
    R.push('/index')
  }).catch(e => Toast.add({severity: 'error', summary: e, life: 3000}))
}

onMounted(()=>{S.commit('setLoading', false)})

</script>
<style lang="stylus" scoped>
.bg
  height 100%
  width 100%
  position fixed
  top 0
  left 0
  z-index -1

.avatar
  width 100px
  border-radius 10%
  overflow hidden

.content
  width 400px
  position fixed
  right 100px
  top calc(50% - 150px)
  background rgba(0, 0, 0, .5)
  padding 20px 40px
  border-radius 10px

  .title
    font-size 1.3em
    font-weight bold

  .row
    margin-top 30px
</style>
